<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
		<style>
			.loading {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.2);
				/* display: flex; */
				display: none;
				align-items: center;
				justify-content: center;
			}
			.loading div {
				height: 100px;
				width: 100px;
				border: 10px solid rebeccapurple;
				border-radius: 50%;
				border-bottom-color: transparent;
				border-top-color: transparent;
				animation: loading 2s infinite linear;
			}
			
			@keyframes loading {
				to {
					transform: rotate(360deg);
				}
			}
		</style>
</head>
<body>

<div class="form" style="width: 80%; margin: 0 auto;">
	身高：<input type="text" name="height"><br>
	体重：<input type="text" name="weight"><br>
	<button>提交</button>
</div>

<table border="1" style="width: 80%; margin: 0 auto;">
	<thead>
		<tr>
			<th>#</th>
			<th>时间</th>
			<th>身高</th>
			<th>体重</th>
			<th>BMI</th>
			<th>状态</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody id="list">
		<!-- <tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="7" style="text-align: center;">加载中。。。</td>
		</tr> -->
	</tbody>
	<!-- <tfoot>
		<tr>
			<td colspan="7" style="text-align: center;">加载中。。。</td>
		</tr>
	</tfoot> -->
</table>


<div class="loading">
	<div></div>
</div>


<script src="js/jquery-3.5.1.js"></script>
<script src="js/index.js"></script>
</body>
</html>